<template>
    <div>
        <table-set :tableHeader="tableHeader" @headerSet="headerSet"></table-set>

        <!-- <fnc-search ref="addnew" :selectHead='selectHead' :conditionForm='conditionForm' @searchParams='submitsearch' @reset='resetForm' @removeDomain='removeDomain'></fnc-search> -->

        <span class="down-execel" style="float: right;margin-right: 20px">
            <Poptip v-model="showFilter" placement="bottom-end">
                <i class="el-icon-search poptip-condition-add"></i>
                <a href="javascript:;" class='poptip-condition-add'>列表查找</a>
                <div slot="content">
                    <Poptip v-model="showFilterCondition" placement="bottom-start" class='poptip-condition'>
                        <i class="el-icon-plus"></i>
                        <a href="javascript:;">添加过滤条件</a>
                        <div slot="content" class="condition-list">
                            <ul>
                                <li
                                    v-for="(item, index) in selectHead"
                                    :key="index"
                                    class='poptip-condition-item'
                                    @click="addFilterCondition(item)">
                                    {{item.label}}
                                </li>
                            </ul>
                        </div>
                    </Poptip>
                    <el-form :model="conditionForm" ref="conditionForm" label-min-width="120px" class="demo-dynamic" @submit.native.prevent>
                        <el-form-item
                            v-for="(condition, index) in conditionForm.condition"
                            :label="condition.label"
                            :key="condition.key"
                            :prop="'condition.' + index + '.value'"
                            :rules="{required: true, message: condition.label + '不能为空', trigger: 'blur'}">
                            <el-date-picker
                                v-model="condition.value"
                                type="daterange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd"
                                size="small"
                                :validate-event='false'
                                v-if='condition.label === "提交时间" || condition.label === "更新时间"'>
                            </el-date-picker>
                            <el-input v-else size="small" v-model="condition.value" @keyup.enter.native="submitsearch('conditionForm')"></el-input>
                            <el-button @click.stop="removeDomain(condition)" size="mini" v-no-more-click:3000>删除</el-button>
                        </el-form-item>
                    </el-form>

                    <div class="btns">
                        <el-button @click="submitsearch('conditionForm')" size="mini" v-no-more-click:3000>查询</el-button>
                        <el-button @click="resetForm('conditionForm')" size="mini" v-no-more-click:3000>重置</el-button>
                    </div>
                </div>
            </Poptip>
        </span>
        <el-table
            @sort-change="tableSort"
            :height="tableHeight"
            :data="tableData"
            ref="soft-table"
            v-loading="loading"
            v-if="table_show"
            border
            style="width: 100%"
        >
            <template v-for="(item, index) in tableHeader">
                <el-table-column
                    v-if="item.label == 'ID' && item.is_show"
                    :key="index"
                    :label="item.label"
                    min-width="60"
                    align="left"

                >
                    <template slot-scope="scope">
                        {{(scope.$index + 1) + (current_page - 1) * per_page}}
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="item.label == '订单编号' && item.is_show"
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    align="left"
                    min-width="200"
                    sortable="custom"
                    :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                    v-if="item.label == '联络人' && item.is_show"
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    align="left"
                    min-width="100"
                    :show-overflow-tooltip="true"
                    sortable="custom"
                ></el-table-column>
                <el-table-column
                    v-if="item.label == '联络人电话' && item.is_show"
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    align="left"
                    min-width="130"
                    sortable="custom"
                    :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                    v-if="item.label == '联络人邮箱' && item.is_show"
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    align="left"
                    min-width="150"
                    :show-overflow-tooltip="true"
                    sortable="custom"
                ></el-table-column>
                <el-table-column
                    v-if="item.label == '软著简称' && item.is_show"
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    align="left"
                    min-width="150"
                    :show-overflow-tooltip="true"
                    sortable="custom"
                ></el-table-column>
                <el-table-column
                    v-if="item.label == '软著全称' && item.is_show"
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    align="left"
                    min-width="150"
                    :show-overflow-tooltip="true"
                    sortable="custom"
                ></el-table-column>
                <el-table-column
                    v-if="item.label == '软著说明文件' && item.is_show"
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    align="left"
                    min-width="150"
                >
                    <template slot-scope="scope">
                        <a
                            v-if="scope.row.instruction_file"
                            :href="baseUrl +'/api/download?path=' + scope.row.instruction_file"
                            :download="scope.row.instruction_file"
                            class="el-icon-tickets file_sh">
                        </a>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="item.label == '软著源码' && item.is_show"
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    align="left"
                    min-width="100"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                        <a
                            v-if="scope.row.code_file"
                            :href="baseUrl +'/api/download?path=' + scope.row.code_file"
                            :download="scope.row.code_file"
                            class="el-icon-tickets file_sh">
                        </a>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="item.label == '订单状态' && item.is_show"
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    align="left"
                    min-width="110"
                    sortable="custom"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                        <span>{{scope.row.status}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="item.label == '提交时间' && item.is_show"
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    align="left"
                    min-width="160"
                    sortable="custom"
                    :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                    v-if="item.label == '更新时间' && item.is_show"
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    align="left"
                    min-width="160"
                    sortable="custom"
                    :show-overflow-tooltip="true"
                ></el-table-column>
            </template>
        </el-table>
        <pagination @paginationChange="paginateChange" :total="total" class="mt30"></pagination>
    </div>
</template>

<script>
import Pagination from '~/components/pagination'
import tableSet from '~/components/tableSet'
import fncSearch from '~/components/searchSrceen/fnc-search.js'
export default {
    components: {
        Pagination,
        tableSet,
        fncSearch
    },
    data() {
        return {
            baseUrl: global.baseurl,
            table_show: true,
            loading: false,
            tableData: [],
            current_page: 1,
            per_page: 25,
            total: 0,
            checked99: true,
            tableHeader: [
                {
                    label: 'ID',
                    is_show: true
                },
                {
                    label: '订单编号',
                    prop: 'order_number',
                    is_show: true
                }, {
                    label: '联络人',
                    prop: 'liaisons',
                    is_show: true
                }, {
                    label: '联络人电话',
                    prop: 'liaisons_tel',
                    is_show: true
                }, {
                    label: '联络人邮箱',
                    prop: 'liaisons_email',
                    is_show: true
                }, {
                    label: '软著简称',
                    prop: 'abbreviation',
                    is_show: true
                }, {
                    label: '软著全称',
                    prop: 'name',
                    is_show: true
                }, {
                    label: '软著说明文件',
                    prop: 'instruction_file',
                    is_show: true
                }, {
                    label: '软著源码',
                    prop: 'code_file',
                    is_show: true
                }, {
                    label: '订单状态',
                    prop: 'status',
                    is_show: true
                }, {
                    label: '提交时间',
                    prop: 'created_at',
                    is_show: true
                }, {
                    label: '更新时间',
                    prop: 'updated_at',
                    is_show: true
                },
            ],
            showFilter: false,
            showFilterCondition: false,
            // 筛选条件
            conditionForm: {
                condition: []
            },
            search_params: {}
        }
    },

    created() {
        this.getTableData()
    },

    computed: {
        tableHeight() {
            let height = 1000
            if (process.client) {
                height = window.innerHeight - 250
            }
            return height
        },
        selectHead() {
            let arr = this.tableHeader.filter(v => (v.prop != 'instruction_file' && v.prop != 'code_file'))
            return arr
        }
    },

    methods: {

        paginateChange(params) {
            this.per_page = params.perPage
            this.current_page = params.page
            this.getTableData()
        },
        headerSet(data) {
            this.table_show = false
            this.tableHeader = data
            this.$nextTick(() => {
                this.table_show = true
            })

            setTimeout(() => {
                this.$nextTick(() => {
                    this.gwm()
                })
            }, 300)
        },
        gwm() {
				//水印,非管理员要设置
				if (this.$store.state.user.role_id != 1
					&& this.$route.path != '/admin/register'
					&& this.$route.path != '/admin/personalCenter/dstribution'
					&& this.$route.path != '/admin/personalCenter/myPurse'
					&& this.$route.path != '/admin/activityList/activityConfig'
					&& this.$route.path != '/admin/activityList/sysConfig'
					&& this.$route.path !='/admin/login'
					&& this.$route.path != '/admin/agentImprove'
					&& this.$route.path != '/order/login') {
					let that = this;
					let gwm = require('gwm');
					gwm.creation({
						'txt': that.$store.state.user.name,
						'container': '.el-table', //#gwm
						'fontSize': 40
					})
				}
			},
        tableSort(column) {
            let params = {
                sort_str: column.prop,
            }
            if (column.order === 'descending') {
                params.sort_str = column.prop
                params.sort_order = 'desc'
            } else if (column.order === 'ascending'){
                params.sort_str = column.prop
                params.sort_order = 'asc'
            } else {
                params = {}
            }
            this.getTableData(params)
        },
        getTableData(args) {

            let params = {
                page: this.current_page,
                perPage: this.per_page,
                consumer_id: this.$store.state.user.id,
                sort_str: 'created_at',
                sort_order: 'desc'
            }
            params = {...params, ...this.search_params}
            if (args) {
                params = {...params, ...args}
            }
            this.loading = true
            this.$axios.get('/api/software',{
                params: params
            }).then(res => {
                if (res.data.code == 200) {
                    this.tableData = res.data.data
                    this.total = res.data.page.total
                    this.loading = false
                } else {
                    this.loading = false
                    this.$message({
                        type: 'error',
                        message: res.data.message
                    })
                }
            }).catch(e => {
                this.loading = false
            })
        },
        addFilterCondition(item) {
            let filterItem = {
                value: '',
                label: item.label,
                parameter: item.prop,
                key: Date.now()
            }

            if (this.conditionForm.condition.length > 0) {
                let conditionlabels = []
                for (let i = 0; i < this.conditionForm.condition.length; i++) {
                    conditionlabels.push(this.conditionForm.condition[i].label)
                }
                let Check = conditionlabels.indexOf(item.label)
                Check == -1 ? this.conditionForm.condition.push(filterItem) : this.$message.error('请勿重复添加')
            } else {
                this.conditionForm.condition.push(filterItem)
            }

            this.showFilterCondition = false;
        },
        removeDomain(item) {
            let index = this.conditionForm.condition.indexOf(item)
            if (index !== -1) {
                this.conditionForm.condition.splice(index, 1)
            }
            if (item.label === '提交时间') {
                this.submitTime = []
            }
            let props = JSON.parse(JSON.stringify(this.conditionForm.condition))
            let params = {}
            props.forEach(v => {
                params[v.parameter] = v.value
            })
            if (params.created_at) {
                params.createdTime = params.created_at
                delete params.created_at
            }
            this.search_params = params
            this.getTableData()
        },
        submitsearch(formName) {
            let that = this
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let props = JSON.parse(JSON.stringify(this.conditionForm.condition))
                    let params = {}
                    props.forEach(v => {
                        params[v.parameter] = v.value
                    })
                    if (params.created_at) {
                        params.createdTime = params.created_at
                        delete params.created_at
                    }
                    this.current_page = 1
                    this.$refs['soft-table'].clearSort()
                    this.search_params = params
                    this.getTableData()
                    this.showFilterCondition = false
                    this.showFilter = false
                }
            })
        },
        resetForm(formName) {
            // this.$refs[formName].resetFields()
            this.conditionForm.condition.forEach(v => {
                if (v.value) {
                    v.value = null
                }
            });
            this.$refs['soft-table'].clearSort()
             this.$nextTick(() => {
                this.$refs[formName].clearValidate()
            })
            // this.getTableData()
            // this.showFilterCondition = false
            // this.showFilter = false
        },
    }
}
</script>

<style lang="less" scoped>
.file_sh {
    font-size: 25px;
}
/deep/.ivu-poptip-inner {
    min-width: 450px;
    // height: 300px;
    overflow-y: scroll;
}

/deep/.poptip-condition .ivu-poptip-inner {
    min-width: 180px;
}
.down-execel {
		display: block;
		height: 40px;
		line-height: 40px;
		color: #333333;
		font-size: 14px;
		float: right;
		margin-right: 20px;
  }

.demo-dynamic {
    padding-left: 10px;

    .el-form-item {
        margin-bottom: 12px;
    }

    .el-input {
        width: 240px;
    }

    .el-date-editor {
        width: 240px;
    }

    .el-button {
        padding: 9px 15px;
        vertical-align: baseline;
    }

    .el-form-item__error {
        padding-top: 0;
    }
}

.poptip-condition {
    display: block;
    margin-top: 10px;

    .poptip-condition-item {
        line-height: 25px;
        cursor: pointer;
    }

    .poptip-condition-add {
        font-size: 14px;
    }
}

.btns {
    margin-top: 10px;
}
</style>
